<template>
  <div class="life_pay">
    <van-nav-bar
      title="生活缴费"
      left-arrow
      @click-left="$router.go(-1)"
      right-text="缴费记录"
      @click-right="payRecord"
      fixed
    />
    <div class="lifepay_sub_title">分组</div>
    <div class="lifepay_devide_info">
      <div
        class="devide_content"
        v-for="option in feeTypeList"
        :key="option.id"
      >
        <div class="devide_sub_title">
          <span>{{ option.groupName }}</span>
        </div>
        <div class="devide_sub_icon">
          <svg-icon
            icon-class="三个点"
            @click.native="screen(option)"
          ></svg-icon>
        </div>
        <ul>
          <li
            v-for="item in option.groupItems"
            :key="item.id"
            class="payment_list"
            @click="immediatePay(item)"
          >
            <div class="payemnt_left_icon">
              <svg-icon
                :icon-class="item.icon ? item.icon : '燃气费'"
                widthW="0.7rem"
                heightH="0.8rem"
              ></svg-icon>
            </div>
            <div class="payment_info">
              <span>{{ item.itemName ? item.itemName : "未知" }}</span>
              <div class="payment_sub_info">
                {{ `${option.houseCode}|${option.owned ? option.owned : "未知"}` }}
              </div>
            </div>
            <div class="payemnt_right_icon">
              <svg-icon
                icon-class="箭头"
                widthW="0.25rem"
                heightH="0.4rem"
              ></svg-icon>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="devide_div"></div>
    <div class="lifepay_sub_title">新增缴费</div>
    <div class="lifepay_devide_info">
      <van-grid :gutter="10" :border="false" :column-num="4">
        <van-grid-item
          v-for="item in createTypeList"
          :key="item.id"
          @click="newPayment(item)"
        >
          <svg-icon
            :icon-class="item.icon"
            widthW="0.6rem"
            heightH="0.7rem"
          ></svg-icon>
          <span class="function_text">{{ item.title }}</span>
        </van-grid-item>
      </van-grid>
    </div>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      @cancel="show = false"
      @select="onSelect"
    ></van-action-sheet>
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
  </div>
</template>

<script>
import smartProperty from "@/controller/smartProperty.js";
import constant from "@/controller/constant.js";
import { Dialog } from "vant";
export default {
  data() {
    return {
      showLoading: true,
      feeTypeList: [],
      createTypeList: [],
      show: false,
      actions: [
        {
          name: "户号管理"
        },
        {
          name: "删除分组"
        }
      ],
      groupId: null
    };
  },
  mounted() {
    this.getGroupPayList();
    this.getAllItem();
  },
  methods: {
    getAllItem() {
      smartProperty
        .community_payment_item_all()
        .then(res => {
          if (res.code === "0") {
            this.createTypeList = res.datas;
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    getGroupPayList() {
      smartProperty
        .community_payment_group_list({})
        .then(res => {
          if (res.code === "0") {
            this.feeTypeList = res.datas;
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    payRecord() {
      this.$router.push({ name: "payHistory" });
    },
    newPayment(val) {
      this.$router.push({ name: "newPay", query: val });
    },
    screen(val) {
      this.show = true;
      this.groupId = val.id;
    },
    handleDelete() {
      this.showLoading = true;
      smartProperty
        .community_payment_group_delete(this.groupId)
        .then(res => {
          if (res.code === "0") {
            this.$toast("删除成功！");
            this.getGroupPayList();
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.show = false;
          this.showLoading = false;
        });
    },
    onSelect(val) {
      if (val.name === "删除分组") {
        Dialog.confirm({
          title: "提示",
          message: `确认删除当前分组?`
        })
          .then(() => {
            this.handleDelete();
          })
          .catch(() => {});
      } else {
        // TODO
        this.$router.push({
          name: "houseNumberManage",
          query: this.feeTypeList
        });
      }
    },
    immediatePay(val) {
      this.$router.push({ name: "immediatePay", query: val });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/workstation.scss";

.life_pay {
  background: #ffffff;
  height: 100%;
  .function_text {
    margin-top: 8px;
    color: #666666;
    font-size: 14px;
  }

  .payment_list {
    padding: 15px 0;
    display: flex;
    flex-wrap: wrap;
    width: 315px;
    border-bottom: 1px solid #edeff2;

    .payemnt_left_icon {
      width: 20px;
      float: left;
      margin-top: 8px;
    }

    .payemnt_right_icon {
      width: 20px;
      position: absolute;
      right: 20px;
      margin-top: 16px;
    }

    .payment_info {
      float: right;
      margin-left: 11.5px;

      .payment_sub_info {
        font-size: 12px;
        color: #999999;
        margin-top: 5px;
        line-height: 16.5px;
      }

      span {
        font-size: 16px;
        color: #333333;
        line-height: 22.5px;
      }
    }
  }

  .payment_list:last-child {
    border: none;
  }

  .devide_content {
    display: flex;
    flex-wrap: wrap;
    padding: 14.5px 0 0 15px;
  }

  .devide_sub_title {
    width: 320px;
    font-size: 14px;
    float: left;
    color: #666666;

    span {
      line-height: 20px;
    }
  }

  .devide_sub_icon {
    width: 17.5px;
    float: right;
    margin-top: 4.25px;
  }
}
</style>
